<template>
	<view class="rank_container">
		<!-- 顶部背景 -->
		<view class="rank_header" :style="{height: navBarHeight+'px'}">
			<image class="_img" :style="{height: navBarHeight+'px'}" src="https://sputniknews.cn/images/102440/07/1024400711.jpg" mode="aspectFill"></image>
		</view>
		
		<u-navbar
			title="排名"
			:titleStyle="{color: '#ffffff'}"
			leftIcon=" "
			bgColor="rgba(255,255,255,0)"
			fixed
		/>
		
		<view class="rank_list">
			<view class="_tr">
				<view class="_t1">排名</view>
				<view class="_t2">用户ID</view>
				<view class="_t3">人气</view>
			</view>
			<view class="_item" v-for="(item,index) in 50" :key="index">
				<view class="_index">{{ index + 1 }}</view>
				<image class="_head" @click="routeMember(item)" mode="aspectFill" src="https://img1.baidu.com/it/u=1097077603,238359071&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
				<view class="_name">赵**</view>
				<view class="_popular">5421531</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarHeight: 0, // 导航栏的高度
			}
		},
		onLoad() {
			this.getNavBarHeight();
		},
		methods: {
			// 计算滚动条的高度
			async getNavBarHeight() {
				let sysInfo =  await uni.getSystemInfoAsync()
				// 顶部大图的高度
				this.navBarHeight = sysInfo.statusBarHeight + 44 + 160;
			},
			
			// 跳转大师详情
			routeMember(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/member/member"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rank_container{
		background-color: #fff;
	}
	.rank_header{
		._img{
			width: 100%;
			display: block;
		}
	}
	
	.rank_list{
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		position: relative;
		top: -60rpx;
		._tr{
			padding: 30rpx;
			display: flex;
			align-items: center;
			color: #999;
			line-height: 30rpx;
			._t1{
				width: 100rpx;
			}
			._t3{
				flex: 1;
				text-align: right;
			}
		}
		._item{
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #e8e8e8;
			&:last-child{
				border-bottom: none;
			}
			._index{
				font-weight: bold;
				width: 100rpx;
			}
			._head{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			._name{
				margin-bottom: 14rpx;
				font-weight: bold;
			}
			._popular{
				color: $u-primary;
				flex: 1;
				text-align: right;
			}
		}
	}
</style>
